layui.use(['table', 'form', 'element'], function () {
    let table = layui.table,
        form = layui.form,
        $ = layui.jquery,
        element = layui.element;
    setTimeout(function () {
        //方法级渲染
        table.render({
            elem: '#dockerDeploy'
            ,
            url: '/admDockerDeploy/page?projectId=' + $('#projectId').val() + "&moduleName=" + $('#moduleName').val() + "&namespaceId=" + $('#namespaceId').val()
            ,
            toolbar: '#toolbarTable'
            ,
            title: 'docker部署'
            ,
            totalRow: true
            ,
            id: "dockerDeploy"
            ,
            cols: [[
                {checkbox: true, fixed: true}
                , {field: 'ip', title: '宿主机ip', width: 180, sort: true}
                , {field: 'tag', title: '当前版本', width: 120, sort: true}
                , {
                    field: 'containerStatusName', title: '容器状态', width: 100, sort: true, templet: function (d) {
                        let className = '';
                        if (d.containerStatusName == 'running') {
                            className = 'layui-bg-green'
                        }
                        if (d.containerStatusName == 'exited') {
                            className = 'layui-bg-red'
                        }
                        if (d.containerStatusName == 'paused') {
                            className = 'layui-bg-warm'
                        }
                        if (d.containerStatusName == '连接失败') {
                            className = 'layui-bg-gray'
                        }
                        return '<span class = "layui-badge ' + className + '" >' + d.containerStatusName + '</span>';
                    }
                }
                , {field: 'lastDeployDate', title: '更新时间', width: 160, sort: true}
                , {
                    field: 'deployStatus', title: '部署状态', width: 250, sort: true, templet: function (d) {
                        //状态：0空闲 1编译中 2代码上传 3镜像构建中 4.构建完毕 5.push仓库 6.拉取镜像 7.开始启动新容器 8.启动成功  9.maven编译失败 10.docker部署失败
                        let ys = '';
                        let statusName = '';
                        let className = '';
                        if (d.deployStatus == 0) {
                            ys = 'layui-btn-primary'
                            className = 'layui-bg-gray'
                        } else if (d.deployStatus == 10 || d.deployStatus == 11) {
                            ys = 'layui-btn-danger'
                            className = 'layui-bg-warm'
                        } else {
                            ys = 'layui-btn-normal'
                            className = 'layui-bg-blue'
                        }
                        statusName = '<span class="layui-badge  ' + className + '" style="float:left;">' + d.deployStatusName + '</span>';

                        //***重点***：拼接进度条
                        return '<div style="display:inline"><div style="float:left;width: 120px" class="layui-progress layui-progress-big" lay-showpercent="true">' +
                            '<div class="layui-progress-bar ' + ys + '" lay-percent="' + d.progressBar + '%">' +
                            '</div>' +
                            '</div>' + statusName + '' +
                            '</div>'

                    }
                }
            ]]
            ,
            even: true
            ,
            page: true //是否显示分页
            ,
            skip: true //开启跳页
            ,
            limits: [10, 30, 60]
            ,
            width: 1000
            // , height: 'full-150'
            ,
            limit: 10 //每页默认显示的数量
            ,
            parseData: function (res) { //res 即为原始返回的数据
                var data = res.data;
                return {
                    "code": status, //解析接口状态   （好像必须是0 才可以）
                    "msg": data.desc, //解析提示文本
                    "count": data.total, //解析数据长度
                    "data": data.records //解析数据列表
                };
            }
            ,
            done: function (res, currentCount) {
                //***重点***：table渲染完成后渲染element进度条
                element.render()
            }
        });
    }, 200)

});
